<template>
    <div>
        <div class="home-overview">
            <!-- 用户信息 -->
            <div class="user-meta">
                <div class="avatar">
                    <img :src="avatar" />
                </div>
                <h4>{{ userDetail?.name }}</h4>
            </div>
            <div class="item">
<!--                <a href="javascript:;">-->
<!--                    <span class="iconfont icon-hy"></span>-->
<!--                    <p>个人中心</p>-->
<!--                </a>-->
<!--                <a href="javascript:;">-->
<!--                    <span class="iconfont icon-aq"></span>-->
<!--                    <p>安全设置</p>-->
<!--                </a>-->
<!--                <a href="javascript:;">-->
<!--                    <span class="iconfont icon-dw"></span>-->
<!--                    <p>地址管理</p>-->
<!--                </a>-->
              <div style="color: white" @click="updateDetail">
                <i class="el-icon-edit"></i>  修改地址或个人信息<br>地址：{{userDetail.address}}
              </div>
            </div>
        </div>
        <div class="like-container">

          <el-descriptions class="margin-top"  :column="3" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                账号
              </template>
              {{ userDetail.username }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{ userDetail.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                姓名
              </template>
              <el-tag size="small">{{ userDetail.name }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                注册时间
              </template>
              {{ userDetail.createTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="userDetail.access===1">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                权限
              </template>
              超级管理员
            </el-descriptions-item>

            <el-descriptions-item v-if="userDetail.access===2">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                权限
              </template>
              普通管理员
            </el-descriptions-item>

            <el-descriptions-item v-if="userDetail.access===3">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                权限
              </template>
              普通用户
            </el-descriptions-item>

            <el-descriptions-item v-if="userDetail.state===1">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                状态
              </template>
              正常
            </el-descriptions-item>

            <el-descriptions-item v-if="userDetail.state===0">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                状态
              </template>
              被禁用
            </el-descriptions-item>
          </el-descriptions>
        </div>
      <el-dialog title="修改个人信息" :visible.sync="updateShow" :append-to-body="true" :modal-append-to-body="false">
        <el-form :model="updateForm">
          <el-form-item label="账号:" prop="username" :label-width="formLabelWidth">
            <el-input v-model="updateForm.username" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="password" :label-width="formLabelWidth">
            <el-input v-model="updateForm.password" style="width: 30%"></el-input>
          </el-form-item>


          <el-form-item label="姓名:" prop="name" :label-width="formLabelWidth">
            <el-input v-model="updateForm.name" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="性别:" prop="name" :label-width="formLabelWidth">
            <el-radio v-model="updateForm.sex" label="男">男</el-radio>
            <el-radio v-model="updateForm.sex" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="手机号码:" prop="phone" :label-width="formLabelWidth">
            <el-input v-model="updateForm.phone" style="width: 20%"></el-input>
          </el-form-item>
          <el-form-item label="地址详情:" width="50%" :label-width="formLabelWidth">
            <el-input v-model="userDetail.address" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateShow = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
// 导入GoodsItem组件
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
export default {
    name:'UserInfo',
    data(){
        return {
          avatar: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.u2dILbnCKi-cYoWLpCcNXAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
          userDetail: {},
          formLabelWidth: '120px',
          updateShow: false,
          newUserDetail: {},
          updateForm:{}
        }
    },
    components:{
        GoodsItem
    },
    computed:{
        ...mapState('user',['userInfo','likeList']),
    },
    mounted(){
      const user = JSON.parse(window.sessionStorage.getItem("user"))
      // this.$store.dispatch('user/getLikeList',{limit:4})
      this.getUserDetail(user.id);
    },
  methods:{

    //添加类型表单
    submitForm() {
      this.$http.post("/user/saveOrUpdate" ,this.updateForm).then(res => {
        if (res.data.status) {
          this.$message.success(res.data.data);
          this.getUserDetail(this.userDetail.id);
        } else {
          this.$message.error(res.msg);
        }
      });
      this.updateShow = false
    },

    updateDetail() {
      this.updateShow = true
      this.updateForm = this.userDetail

    },
    getUserDetail(id) {
      this.$http.get("/user/detail/" + id).then(res => {
        // console.log(res.data)
        this.userDetail = res.data.data;
      });
    },
  }
}
</script>

<style scoped lang="scss">
.home-overview {
    height: 132px;
    background: url('@/assets/images/center-bg.png') no-repeat center / cover;
    display: flex;

    .user-meta {
        flex: 1;
        display: flex;
        align-items: center;

        .avatar {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 60px;

        img {
            width: 100%;
            height: 100%;
        }
        }

        h4 {
        padding-left: 26px;
        font-size: 18px;
        font-weight: normal;
        color: white;
        }
    }

    .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &:first-child {
        border-right: 1px solid #f4f4f4;
        }

        a {
        color: white;
        font-size: 16px;
        text-align: center;

        .iconfont {
            font-size: 32px;
        }

        p {
            line-height: 32px;
        }
        }
    }
    }

    .like-container {
    margin-top: 20px;
    border-radius: 4px;
    background-color: #FCFAF7;
    }

    .home-panel {
    background-color: #FCFAF7;
    padding: 0 20px;
    margin-top: 20px;
    height: 400px;

    .header {
        height: 66px;
        border-bottom: 1px solid #f5f5f5;
        padding: 18px 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        h4 {
        font-size: 22px;
        font-weight: 400;
        }

    }

    .goods-list {
        display: flex;
        justify-content: space-around;
    }
}
</style>
